<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="mycanvas" width="1300" height="600" ></canvas>
		<script type="text/javascript">
			var canvas= document.getElementById("mycanvas");
			var ctx = canvas= canvas.getContext("2d");
			var arc1X = 20;
			var arc1Y = 20;
			var arc1R = 20;
			var l1 = 5;
			var t1 =5;
			
			var arc2X = 20;
			var arc2Y = 20;
			var arc2R = 20;
			var l2 = 7;
			var t2 =5;
			
			var arc3X = 20;
			var arc3Y = 20;
			var arc3R = 20;
			var l3 = 15;
			var t3 =8;
			
			setInterval(function(){
				ctx.fillStyle = "rgba(0,255,0,0.1)";
				ctx.fillRect(0,0,1300,600);
				ctx.beginPath();
				ctx.fillStyle="gray";
				ctx.arc(arc1X,arc1Y,50,0,2*Math.PI);
				ctx.fill();
				arc1X=arc1X+l1;
				arc1Y= arc1Y+t1;
				if(arc1Y>600-arc1R||arc1Y<arc1R){
					t1=-t1;
				}
				if(arc1X>1300-arc1R||arc1X<arc1R){
					l1=-l1;
				}
				
				ctx.fillStyle = "rgba(0,255,0,0.2)";
				ctx.fillRect(0,0,1300,600);
				ctx.beginPath();
				ctx.fillStyle="red";
				ctx.arc(arc2X,arc2Y,30,0,2*Math.PI);
				ctx.fill();
				arc2X=arc2X+l2;
				arc2Y= arc2Y+t2;
				if(arc2Y>600-arc2R||arc2Y<arc2R){
					t2=-t2;
				}
				if(arc2X>1300-arc2R||arc2X<arc2R){
					l2=-l2;
				}
				
				ctx.fillStyle = "rgba(0,255,0,0.2)";
				ctx.fillRect(0,0,1300,600);
				ctx.beginPath();
				ctx.fillStyle="yellow";
				ctx.arc(arc3X,arc3Y,60,0,2*Math.PI);
				ctx.fill();
				arc3X=arc3X+l3;
				arc3Y= arc3Y+t3;
				if(arc3Y>600-arc3R||arc3Y<arc3R){
					t3=-t3;
				}
				if(arc3X>1300-arc3R||arc3X<arc3R){
					l3=-l3;
				}
				
			},16);
		</script>
	</body>
</html>
